<template>
  <div ref="microBox"></div>
</template>

<script>
import { loadMicroApp } from "qiankun";

export default {
  name: "micro-app",
  props: ["name", "entry"],
  data() {
    return {
      microApp: null
    };
  },
  mounted() {
    const name = this.name;
    const entry = this.entry;
    this.microApp = loadMicroApp({
      name,
      entry,
      container: this.$refs.microBox,
    });
  },
  destroyed() {
    this.microApp.unmount();
  },
  updated() {
    this.microApp.update({
      name: this.name,
      entry: this.entry
    });
  }
};
</script>
